<template>
  <el-container>
    <el-header>
      <div class="app-container">
        <div class="filter-container">
          <el-input v-model="listQuery.content" placeholder="press Enter to Serach" clearable class="filter-item" @keyup.enter.native="handleFilter" />
        </div>
      </div>
    </el-header>
    <el-main>
      <div class="block">
        <div style="margin-left: 24px;">
          <el-button v-show="hasMore" v-waves type="text" icon="el-icon-refresh" @click="more()">Show more previous clips</el-button>
          <span style="color: #909399;font-size: 12px;">total {{ total }} snippet</span>
        </div>
        <el-timeline :reverse="true">
          <el-timeline-item v-for="(item, index) in list" :key="item.id" :timestamp="item.createAt | parseTime('{y}-{m}-{d} {h}:{i}')" placement="top">
            <el-card>
              <MarkdownViewer :content="item.content" />
            </el-card>
            <i class="el-icon-edit ml10 brand" @click="handleEdit(item)" />
            <i v-clipboard:copy="item.content" v-clipboard:success="clipboardSuccess" class="el-icon-document-copy ml10 waring" />
            <i class="el-icon-delete ml10 danger" @click="handleDelete(item.id, index)" />
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-main>
    <el-footer>
      <CreateSnippet @create="create" />
    </el-footer>
    <EditSnippet ref="editSnippet" @editcb="editcb" />
  </el-container>
</template>

<script>
import CreateSnippet from './components/CreateSnippet'
import EditSnippet from './components/EditSnippet'
import MarkdownViewer from '@/components/MarkdownViewer'
import waves from '@/directive/waves' // waves directive
import clipboard from '@/directive/clipboard/index.js' // use clipboard by v-directive
import { fetchList, deleteTopicSnippet } from '@/api/info/topic-snippet'

export default {
  name: 'TopicSnippet',
  directives: { waves, clipboard },
  components: { CreateSnippet, EditSnippet, MarkdownViewer },
  data: function() {
    return {
      id: 0,
      list: [],
      total: 0,
      listQuery: {
        content: undefined,
        topicId: undefined,
        current: 1,
        size: 10,
        desc: ['create_at']
      }
    }
  },
  computed: {
    hasMore() {
      return this.listQuery.current * this.listQuery.size < this.total
    }
  },
  created() {
    const topicId = this.$route.params.id
    this.listQuery.topicId = topicId
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      fetchList(this.listQuery)
        .then(response => {
          this.list = [...this.list, ...response.result.list]
          this.total = response.result.total
          this.listLoading = false
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    more() {
      this.listQuery.current++
      this.getList()
    },
    handleFilter() {
      this.listQuery.current = 1
      this.list = []
      this.getList()
    },
    /**
     * snippet保存成功后，加入显示列表中
     */
    create(e) {
      e.createAt = new Date()
      this.list = [e, ...this.list]
      this.total++
    },
    clipboardSuccess() {
      this.$message({
        message: 'Copy successfully',
        type: 'success',
        duration: 1500
      })
    },
    handleEdit(item) {
      this.$refs.editSnippet.$emit('open', item)
    },
    editcb(row) {
      this.handleFilter()
    },
    handleDelete(id, index) {
      this.$confirm('Confirm delete record?', 'Warning', {
        confirmButtonText: 'Confirm',
        cancelButtonText: 'Cancel',
        type: 'warning'
      }).then(() => {
        deleteTopicSnippet(id).then(response => {
          this.$message({
            type: 'success',
            message: 'deleted successfully!'
          })
          this.list.splice(index, 1)
          this.total -= 1
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-main {
  background-color: #e9eef3;
  height: calc(100vh - 233px);
  .el-timeline {
    padding: 0;
    .ml10 {
      margin-left: 15px;
      cursor: pointer;
    }
  }
}
.el-header {
  background-color: #b3c0d1;
  height: 45px !important;
  .app-container {
    padding: 10px !important;
    // float: right;
  }
}
.el-footer {
  background-color: #f5f0ee;
  padding: 0 5px !important;
  height: 84px !important;
}
</style>
